<template>
  <section>
    <span :title="totalFee">{{ totalFee }} </span>
    <el-popover placement="right-start"
                width="200"
                trigger="click"
                @show="handleShow">
      <div class="contentSty">
        <el-button type="text"
                   class="cost-title"
                   @click="onJump">运费明细</el-button>
        <i class="el-icon-arrow-right"></i>
        <template v-for="(item, i) in priceList">
          <div :key="i"
               class="cost-list">
            <span>{{ item.typeName }}</span> <span>{{ item.price ? thousandDigit(item.price, 2) : 0 }} </span>
          </div>
        </template>
        <div v-if="surchargeFee"
             class="divider-line-solid"></div>
        <div v-if="surchargeFee"
             class="cost-list">
          <span>补充费用</span> {{ surchargeFee ? thousandDigit(surchargeFee,2) : 0 }}
        </div>
        <div class="divider-line-solid"></div>
        <div class="cost-list">
          <span>合计</span> <b class="totalSty">{{ totalFee }}</b>
        </div>
      </div>
      <span slot="reference">
        <icon-svg v-if="totalFee"
                  class="font-style pointer"
                  class-name="iconClass"
                  icon-name="tishi1" />
      </span>
    </el-popover>
    <el-popover placement="top-start"
                width="160"
                trigger="hover">
      <div class="contentSty">
        不参与分摊费用
      </div>
      <span slot="reference">
        <icon-svg v-if="row.followWaybill"
                  class="font-style pointer"
                  class-name="iconClass"
                  icon-name="tishi1" />
      </span>
    </el-popover>
  </section>
</template>

<script>
import { returnThousandDigit } from "@/libs/util.js";
export default {
  name: "QuoteFreight",
  props: {
    row: {
      type: Object,
      default: () => { }
    },
    isCombine: Number
  },
  data () {
    return {
      priceList: [],
      surchargeFee: 0,
      totalFee: 0
    };
  },
  computed: {
    values () {
      return this.row
    }
  },
  watch: {
    values: {
      handler (value) {
        this.totalFee = value?.price?.totalFee && value?.price?.totalFee != 0 ? returnThousandDigit(value?.price?.totalFee, 2) : 0;
      }
    },
    immediate: true
  },
  created () {
    if (this.row?.price) {
      this.totalFee = this.row?.price?.totalFee && this.row?.price?.totalFee != 0 ? returnThousandDigit(this.row?.price?.totalFee, 2) : 0;
    }
  },
  methods: {
    thousandDigit (value, digit) {
      return returnThousandDigit(value, digit)
    },
    handleShow () {
      let arr = [];
      this.surchargeFee = this.row?.price?.surchargeFee
      if (this.row?.price?.minCost) {
        arr.push({ typeName: "最低费用", price: this.row?.price?.minCost });
      } else {
        if (this.row.transportMode === 1) {
          if (this.row?.price?.divideFee && this.row?.price?.divideFee != 0)
            arr.push({ typeName: "零担费", price: this.row?.price?.divideFee });
        } else {
          if (this.row?.price?.wholeFee && this.row?.price?.wholeFee != 0)
            arr.push({ typeName: `${this.isCombine ? '合单运费' : '整车费'}`, price: this.row?.price?.wholeFee });
        }
        if (this.row?.price?.pickFee && this.row?.price?.pickFee != 0)
          arr.push({ typeName: "提货费", price: this.row?.price?.pickFee });
        if (this.row?.price?.deliverFee && this.row?.price?.deliverFee != 0)
          arr.push({ typeName: "送货费", price: this.row?.price?.deliverFee });
        if (this.row?.price?.loadFee && this.row?.price?.loadFee != 0)
          arr.push({ typeName: "装货费", price: this.row?.price?.loadFee });
        if (this.row?.price?.unloadFee && this.row?.price?.unloadFee != 0)
          arr.push({ typeName: "卸货费", price: this.row?.price?.unloadFee });
      }
      if (this.row?.price?.insureFee && this.row?.price?.insureFee != 0)
        arr.push({ typeName: "保险费", price: this.row?.price?.insureFee });
      if (this.row?.price?.taxFee && this.row?.price?.taxFee != 0)
        arr.push({ typeName: "税费", price: this.row?.price?.taxFee });
      this.priceList = [...arr]
    },
    onJump () {
      let name = "quoteFreightDetail"
      let query = {
        waybillId: this.row.waybillId
      }
      if (this.row?.combineId) {
        name = "combineQuoteFee"
        query = {
          combineId: this.row.combineId,
          status: this.row.status
        }
      }
      const { href } = this.$router.resolve({
        name,
        query
      });
      window.open(href, "_blank");
    }
  }
};
</script>
<style lang="scss" scoped>
.cost-list {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 12px;
  color: var(--prev-color-text-ashes);
  > span {
    // align-items: ;
  }
}
.cost-title {
  // font-size: 14px;
  color: #000;
  margin-bottom: 10px;
}
.totalSty {
  color: var(--prev-color-primary);
  font-size: 14px;
  font-weight: bold;
}
.contentSty {
  max-height: 270px;
  overflow-x: hidden;
  padding: 0 15px;
}
</style>
